<template>
  <div class="form">
    <div class="title">对公信息变更</div>
    <ul class="fromul">
      <li>
        <div>姓名</div>
        <div><input type="text" placeholder="请输入姓名"></div>
        <div></div>
      </li>
      <li>
        <div>证件类型</div>
        <div><input type="text" placeholder="请输入证件类型"></div>
        <div></div>
      </li>
      <li>
        <div>证件号码</div>
        <div><input type="text" placeholder="请输入证件号码"></div>
        <div></div>
      </li>
      <li>
        <div>手机号码</div>
        <div><input type="text" placeholder="请输入手机号码"></div>
        <div></div>
      </li>
      <li>
        <div>办公电话</div>
        <div><input type="text" placeholder="请输入办公电话"></div>
        <div></div>
      </li>
      <li>
        <div>联系人类型</div>
        <div id="selectManage"><input type="text" readonly="readonly" placeholder="请选择联先人类型" v-model="managername"
                                      @click="selectPerson"></div>
        <div></div>
      </li>
    </ul>
    <button id="nextStep" @click="nextStep">
      确定
    </button>
    <div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">
      <!-- 可选择菜单 -->
      <ul class="mui-table-view">
        <li class="mui-table-view-cell" v-for="manager in managerList" @click="sureSelect(manager)">
          {{manager}}
        </li>
      </ul>
      <!-- 取消菜单 -->
      <ul class="mui-table-view">
        <li class="mui-table-view-cell" @click="cancelSelect">
          取消
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "contacts",
    data() {
      return {
        managername: "",
        managerList: ["经办人", "大额联系人", "纸质对账人", "凭证购买人"]
      }
    },
    methods: {
      selectPerson() {
        mui('#sheet').popover('toggle')
      },
      sureSelect(manager) {
        this.managername = manager;
        mui('#sheet').popover('toggle')
      },
      cancelSelect() {
        mui('#sheet').popover('toggle')
      }, nextStep() {
        this.$router.go(-1);
      }
    }
  }
</script>

<style scoped lang="less">
  .form {
    .fromul {
      padding: 0 10px;
      margin: 0;
      list-style-type: none;
      li {
        display: flex;
        flex: 7;
        height: 50px;
        align-items: center;
        border-bottom: 1px solid #ddd;
        > div:first-child {
          flex: 2;
          text-align: left;
        }
        > div:nth-child(2) {
          flex: 4;
          input {
            margin: 0;
            border: 0;
            font-size: 15px;
          }
        }
        > div:last-child {
          flex: 1;
          button {
            border: 0;
            border-radius: 40px;
            background: dodgerblue;
            color: white;
          }
        }
      }

      #selectManage {
        position: relative;
        &::before {
          position: absolute;
          width: 20px;
          height: 20px;
          right: 10px;
          top: 10px;
          color: #999;
          pointer-events: none;
          content: '\25BC';
        }
      }
    }
  }
</style>
